<template>
	<view class="container">
		<empty v-if="shopList.length === 0 && loading === false" position="100"></empty>
		<view v-else class="shop-container">
			<view class="shop-box b-b" v-for="(item,index) in shopList" :key="index" @tap="navdetail(item.Id)">
				<view class="shop-image">
					<image class="image" mode="aspectFill" :src='$image + "/merchant/" + item.DoorPic'></image>
				</view>
				<view class="shop-content"> 
					<text class="shop-line1">{{item.Name}}</text>
					<view class="shop-line2">
						<view class="shop-star">
							<text class="iconfont star"></text>
							<text class="iconfont star"></text>
							<text class="iconfont star"></text>
							<text class="iconfont star"></text>
							<text class="iconfont star"></text>
						</view>
						<text class="shop-location"></text>
					</view>
					<view class="shop-line3">
						<text class="discription">{{item.ProductInfo == "" ? "这家伙很懒，什么都没留下" : item.ProductInfo}}</text>
						<view class="distance-box" v-if="latitude != 0">
							<text class="iconfont">&#xe602;</text>
							<text class="distance">{{item.Addr}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
	import empty from "@/components/empty/merchant";
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			empty,
			uniLoadMore,
		},
		data() {
			return {
				pageindex:1,
				shopList:[],
				loadingType: 'more',
				loading: true,
				cateCode: '-1',
				searchKey: '',
				cityCode: '',
				cityName: '',
				latitude: 0,
				longitude: 0,
			};
		},
		//加载更多
		onReachBottom(){
			if(this.loadingType == 'more'){
				this.pageindex++;
				this.loadMerchants();
			}
		},
		onNavigationBarSearchInputChanged:function(e){
			this.searchKey = e.text.trim()
		},
		onNavigationBarSearchInputConfirmed:function(e){
			this.search()
		},
		onLoad(options) {
			this.cateCode = options.cateCode;
			this.cityCode = options.cityCode;
			this.cityName = options.cityName;
			this.latitude = options.latitude;
			this.longitude = options.longitude;
			
			//加载分类名称
			// #ifdef APP-PLUS
			var currentWebview = this.$mp.page.$getAppWebview();
			var tn = currentWebview.getStyle().titleNView;  
			tn.buttons[0].text = options.cateName;     //[0] 按钮的下标
			currentWebview.setStyle({ 
			titleNView: tn 
			});
			// #endif
			
			this.loadMerchants();
		},
		methods: {
			//关键字搜索
			search(){
				uni.hideKeyboard();
				this.pageindex = 1;
				this.loadMerchants("refresh");
			},
			//跳转到商家页面
			navdetail(id){
				uni.navigateTo({
					url:'/pages/merchant/detail?id=' + id
				})
			},
			loadMerchants(type='add', loading){
				//没有更多直接返回
				if(type === 'add'){
					if(this.loadingType === 'nomore'){
						return;
					}
					this.loadingType = 'loading';
				}else{
					this.loadingType = 'more'
				}
				let shopList = [];
				this.$http.get('/MerchantList',{
					"code":this.cateCode,
					"cityCode": this.cityCode,
					"searchKey": this.searchKey,
					"longitude": this.longitude,
					"latitude": this.latitude,
					"pageindex":this.pageindex
				}).then(res=>{
					let count = res.data.count;
					shopList = res.data.list;
					if(type === 'refresh'){
						this.shopList = [];
					}
					this.shopList = this.shopList.concat(shopList);
					this.loading = false;
					
					//判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)
					this.loadingType  = this.shopList.length >= count ? 'nomore' : 'more';
					if(type === 'refresh'){
						if(loading == 1){
							uni.hideLoading()
						}else{
							uni.stopPullDownRefresh();
						}
					}
				})
			},
		},
	}
</script>

<style lang="scss">
	.placeholdClass{
		// font-size: $font-base;
	}
	.condition-section{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: $block-row-spacing;
		input{
			flex: 1;
			background-color: $page-color-base;
			height: 60rpx;
			padding-left: $block-row-spacing;
			font-size: $font-base;
		}
	}
	.shop-container {
		padding: 15upx 20upx;
	}
	.shop-box {
		display: flex;
		flex-direction: row;
		height: 200rpx;
		background-color: #fff;
		margin-bottom: $block-row-spacing;
		align-items: center;
		position: relative;
		&.b-b:after{
			left: 190rpx;
		}
		.shop-image{
			width: 190rpx;
			.image{
				width: 170rpx;
				height: 170rpx;
				opacity: 1;
				border-radius: 10upx;
			}
		}
		.shop-content{
			display: flex;
			flex-direction: column;
			flex: 1;
		}
	}
	.shop-line1{
		font-size: $font-lg;
		height: 50rpx;
	}
	.shop-line2{
		display: flex;
		flex-direction: row;
		height: 30rpx;
		.shop-star{
			height: 30rpx;
			line-height: 30rpx;
			display: flex;
			flex-direction: row;
		}
	}
	.star:before{
		content: '\e63c';
		color: $base-color;
		font-size: 22upx;
		margin-right: 8upx;
		vertical-align: middle;
	}
	.shop-line3{
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		height: 90rpx;
		.discription{
			font-size: $font-sm;
			color:$font-color-light ;
			padding-top: 10upx;
			width: 350rpx;
			overflow: hidden;
			-webkit-line-clamp: 2;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
		}
		.distance-box{
			flex: 1;
			display: flex;
			flex-direction: row;
			align-items: flex-end;
			justify-content: flex-end;
			.iconfont{
				color: $base-color;
				font-size: 30rpx;
				height: 40rpx;
				line-height: 40rpx;
			}
			.distance{
				font-size: $font-sm;
			}
		}
	}
</style>
